<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="statistics_drying2.dryanalysis">干燥炉分析</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
.u-container{
	position: relative;
	width: 100%;
	height: 140px;
	margin: 0 auto;
	margin-top: 40px;
	overflow-x: hidden;
	overflow-y: auto;
}
.u-container .machine:hover{
	background: #29abe2;
}
.u-container p{
	display: none;
}
.machine{
	float: left;
	height: 130px;
	text-align: center;
}
.machine img{
	height: 100%;
}
.undone{
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    background: #d0d0d0;
}
.u-datacon{
	position: relative;
	width: 100%;
	height: 840px;
}
.u-leftline{
	position: relative;
	width: 50%;
	height: 540px;
	float: left;
}
.u-chartcon{
	position: relative;
	float: left;
	width: 900px;
	height: 900px;
	margin-top: 40px;
	margin-left: 100px;
	text-align: center;
	overflow: hidden;
}
.u-chart{
	position: relative;
	float: left;
	width: 100%;
	height: 300px;
	margin: 172px 0 0 26px;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.u-chartleft{
	position: absolute;
	display: block;
	height: 100%;
	width: 20px;
	left: -22px;
	top: 0;
}
.u-changetime{
	width: 100%;
	height: 30px;
}
.u-changetime input.datainp{
	text-indent: 7px;
	height: 27px;
	width: 170px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
	margin-left: 4px;
}
.u-start{
	float: left;
	margin-left: 90px;
}
.u-start label,.u-end label{
	display: inline-block;
	text-align: left;
	width: 100px;
}
.u-end{
	float: left;
	margin-left: 10px;
}

.u-auto{
	line-height: 27px;
}
.u-chartbottom{
	position: absolute;
	display: block;
	width: 40px;
	height: 20px;
	line-height: 20px;
	margin: 0;
	left: -30px;
	bottom: -22px;
}
.u-chartbars{
	float: left;
	position: relative;
	height: 100%;
	width: 20px;
	margin-left: 20px;
	-webkit-transform: rotateX(180deg);
}
.u-chartbars .u-mname{
	position: absolute;
	left: -15px;
	top: -16px;
	line-height: 16px;
	width: 50px;
	font-size: 12px;
	-webkit-transform: rotateX(-180deg);
}
.u-product{
	float: left;
	height: 46px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #f5d73e;
}
.u-break{
	float: left;
	width: 100%;
	height: 20px;
	background: #f44336;
}
.u-error{
	float: left;
	width: 100%;
	height: 20px;
	background: #009fff;
}
.u-chartbars:nth-child(1) .u-product{
	height: 70%;
}
.u-chartbars:nth-child(2) .u-product{
	height: 20%;
}
.u-chartbars:nth-child(3) .u-product{
	height: 50%;
}
.u-chartbars:nth-child(4) .u-product{
	height: 90%;
}
.u-chartbars:nth-child(5) .u-product{
	height: 40%;
}
.u-xm{
	width: 100%;
	margin-top: 20px;
	text-align: left;
}
.u-xm label{
	width: 100px;
	display: inline-block;
}
.u-xm select{
	width: 170px;
	height: 30px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="statistics_drying2.backindex">回到首页</div></a>
	<h3 data-localize="statistics_drying2.dryanalysis">干燥炉分析</h3>
	   <div class="changeLang">
		   <p class="u-lang"><span>中文</span><span>English</span></p>
		   <div isopen="true" class="changeLangBtn"></div>
	   </div>
</div>
</div>

<div class="u-datacon">
	<div class="u-chartcon">
		<div class="u-changetime">
			<div class="u-start"><label data-localize="statistics_drying2.begintime">开始时间</label><input type="text" class="datainp startDate" readonly/></div>
			<div class="u-end"><label data-localize="statistics_drying2.endtime">结束时间</label><input type="text" class="datainp endDate" readonly/></div>
		</div>
		<div class="u-xm">
			<label style="margin-left: 90px;" data-localize="statistics_drying2.line">产线</label>
			<select class="u-selectLine">
			</select>
			<label style="margin-left: 10px;" data-localize="statistics_drying2.equipment">设备</label>
			<select class="drying_type">
				<option value ="1" data-localize="statistics_drying2.drying1">干燥炉1</option>
				<option value ="2" data-localize="statistics_drying2.drying2">干燥炉2</option>
				<option value ="3" data-localize="statistics_drying2.drying3">干燥炉3</option>
			</select>
			<a class="u-downloadCSV" id="downloadCSV" style="margin-left: 10px;"><div class="u-btnblue" data-localize="statistics_drying2.downloadCSV">导出CSV</div></a>
			<div class="u-btnblue u-confirmbtn" data-localize="statistics_drying2.confirm">确认</div>
		</div>
		<div id='canvasDiv'></div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.localize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/language_cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="js/jedate.min.js"></script>
<script type="text/javascript">
var labela = [];
var data;
var csvData;

$(function() {
	
	labela[0] = $('.startDate').val();
    labela[1] = $('.endDate').val();
    data = [{
        name: langMsg.statistics_drying2.time,
        value: [0],
        color: '#29abe2',
        line_width: 2,
    }];
    csvData = {
        header: [langMsg.statistics_drying2.lineId,langMsg.statistics_drying2.equipmentId,langMsg.statistics_drying2.equipmentName,langMsg.statistics_drying2.weight,langMsg.statistics_drying2.time],
        body: []
    };
	var lineurl = getUrl('statistics_getLine');
    $.ajax({  
        type:'get',      
        url: lineurl,
        async : false, 
        dataType: "json", 
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
            		inhtml += '<option value="'+data.resultObject[i].lineId+'">'+data.resultObject[i].lineName+'</option>';
				}
				$('.u-selectLine').append(inhtml);
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });
	var chart = new iChart.LineBasic2D({
		render: 'canvasDiv',
		animation:false,
		animation_duration:'500',
		data: data,
		align: 'center',
		width: 900,
		height: 460,
		shadow: false,
		legend:{
			enable:false,
			background_color : null,
			border : {
				enable : false
			}
		},
		background_color: '#ffffff',
		tip: {
			enable: false,
			shadow: true,
			listeners: {
				//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
				parseText: function(tip, name, value, text, i) {
					return "<span style='color:#005268;font-size:12px;'>" + labels[i] + ""+ langMsg.statistics_drying2.receiveabout +"<br/>" +
						"</span><span style='color:#005268;font-size:20px;'>" + value + ""+ langMsg.statistics_drying2.tenthousand +"</span>";
				}
			}
		},
		sub_option: {
			smooth: false,
			label: false,
			hollow: false,
			hollow_inside: false,
			point_size: 6
		},
		coordinate: {
			width: 640,
			height: 260,
			striped_factor: 0.18,
			gridlinesVisible:false,
			grid_color: '#4e4e4e',
			axis: {
				color: '#252525',
				width: [0, 0, 2, 2]
			},
			scale: [{
				position: 'left',
				scale_share:5,
				label: {
					color: '#333333',
					font: '微软雅黑',
					fontsize: 11,
					fontweight: 600
				},
				scale_color: '#9f9f9f'
			}]
		}
	});
	//利用自定义组件构造左侧说明文本
	chart.plugin(new iChart.Custom({
		drawFn: function() {
			//计算位置
			var coo = chart.getCoordinate(),
				x = coo.get('originx'),
				y = coo.get('originy'),
				w = coo.width,
				h = coo.height;
			//在左上侧的位置，渲染一个单位的文字
			chart.target.textAlign('start')
				.textBaseline('bottom')
				.textFont('600 11px 微软雅黑')
				.fillText(langMsg.statistics_drying2.dryingpercent, x - 40, y - 12, false, '#333333')
				.textBaseline('top')
				.fillText(langMsg.statistics_drying2.time, x + w + 70, y + h + 10, false, '#333333')
				.textBaseline('top')
				.fillText(labela[0], 74, y + h + 8, false, '#333333')
				.textBaseline('top')
				.fillText(labela[1], w+74 , y + h + 8, false, '#333333');
		}
	}));

    $('.u-downloadCSV').click(function(){
    	var obj = document.getElementById('downloadCSV');
        csvDownload(langMsg.statistics_drying2.dryanalysis,obj,csvData);
    });
	chart.draw();
	jeDate({
        dateCell:".endDate",
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19 00:00:00"
    });
    jeDate({
        dateCell:".startDate",
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19 00:00:00"
    });
	//开始画图
	$('.u-confirmbtn').click(function(){
		csvData['body'] = [];
		var aaa = [0];
		var url = getUrl('statistics_drying2'),
			line,startDate,endDate,type;
		line = $(".u-selectLine").val();
		if (!line) {
			return false;
		}
		startDate = $('.startDate').val();
		endDate = $('.endDate').val();
		type = $('.drying_type').val();
		labela[0] = startDate;
        labela[1] = endDate;
		console.log(line,startDate,endDate,type);
		var mes = getData(line,startDate,endDate,type,url);

		console.log(mes);
		for (var i = 0,len = mes.resultObject.list?mes.resultObject.list.length:0; i < len; i++) {
			aaa[i] = mes.resultObject.list[i].yValue;
			csvData['body'].push([line,$('.drying_type').val(),langMsg.statistics_drying2.drying,mes.resultObject.list[i].yValue,mes.resultObject.list[i].xValue]);
		}
		var difff1 = timeminus(endDate,startDate),
			difff2 = mes.resultObject.list[0]?timeminus(mes.resultObject.list[mes.resultObject.list.length-1].xValue,mes.resultObject.list[0].xValue):0,
			difff3 = mes.resultObject.list[0]?timeminus(mes.resultObject.list[0].xValue,startDate):0;
		var per1 = (parseInt(difff3)/parseInt(difff1));
		var per3 = (parseInt(difff2)/parseInt(difff1));
		var xnum = mes.resultObject.list.length/per3;
		var leftnum = parseInt(xnum*per1);
		var rightnum = Math.round(xnum) - leftnum -mes.resultObject.list.length;
		console.log(leftnum,rightnum,xnum);
		for (var i = 0; i < leftnum; i++) {
			aaa.unshift(null);
		}
		for (var i = 0; i < rightnum; i++) {
			aaa.push(null);
		}
		data = [{
			name: langMsg.statistics_drying2.time,
			value: aaa,
			color: '#29abe2',
			line_width: 2,
		}];
		chart.load(data);
	})
});
function getData(line,startDate,endDate,type,url){
    var res = null;
    $.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":line,"startDate":startDate,"endDate":endDate,"type":type},  
        success:function(data){
            if (data.resultCode == 200 && data.resultMessage == "OK") {
                res = data;
            }
        },
        error:function(){
            console.log("fail");
        }  
    });
    return res;
}
</script>

</body>
</html>